<template>
  <div class="house-form">
    <el-form ref="form"
             :model="houseItem"
             :rules="rules"
             label-width="80px"
    >

      <el-form-item label="房屋id" prop="houseid">
        <el-input v-model="houseItem.houseid"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="houseItem.address"></el-input>
      </el-form-item>
      <el-form-item label="面积" prop="area">
        <el-input v-model="houseItem.area"></el-input>
      </el-form-item>
      <el-form-item label="租金" prop="price">
        <el-input v-model="houseItem.price"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="houseItem.status"
                   placeholder="请选择状态">
          <el-option label="已租赁"
                     value="已租赁"></el-option>
          <el-option label="未租赁"
                     value="未租赁"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="showBtn">
        <el-button type="primary"
                   @click="onSubmit">提交
        </el-button>
        <el-button @click="exit">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="js">
import houseList from '@/views/HouseInfo/HouseList.vue'
import axios from 'axios'

export default {
  computed: {
    houseList () {
      return houseList
    }
  },
  components: {},
  // 接受来自父组件的值
  props: {
    showBtn: {
      type: Boolean,
      default: false
    },
    houseItem: {
      type: Object,
      default () {
        return {}
      }
    }

  },
  data () {
    return {
      rules: {
        houseid: [
          {
            required: true,
            message: '请输入房屋id',
            trigger: 'blur'
          },
        ],
        address: [
          {
            required: true,
            message: '请输入房屋地址',
            trigger: 'blur'
          },
        ],
        area: [
          {
            required: true,
            message: '请输入房屋面积',
            trigger: 'blur'
          },
        ],
        price: [
          {
            required: true,
            message: '请输入房屋租金',
            trigger: 'blur'
          },
        ],
        status: [
          {
            required: true,
            message: '请选择房屋状态',
            trigger: 'change'
          }
        ]
      },

    }
  },
  methods: {

    //   添加房源
    onSubmit () {
      axios.post('/houselist', this.houseItem).then(() => {
        this.$message.success("新增成功")
        //重置表单
        this.houseItem = []
        this.dialogVisible = false
      })
    },
    exit(){
      this.$message.info("返回成功")
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.house-form {
  // width: calc(100% - 300px);
  background: #fff;
  padding: 10px;
  padding-right: 20px;
}
</style>
